<h2 class="text-lg font-bold">
    Data Explorer
</h2>

<div class="flex justify-start items-stretch h-full" cdkDropListGroup>
    <div class="w-1/5 relative border-r" ngmResizer [resizerWidth]="200" cdkDropList>
        <ngm-entity-schema
            [dataSettings]="{
                dataSource: 'FOODMART',
                entitySet: 'Sales'
            }"
        ></ngm-entity-schema>

        <ngm-entity-schema
            [dataSettings]="{
                dataSource: 'TopSubscribed',
                entitySet: 'top_subscribed'
            }"
        ></ngm-entity-schema>

        <div ngmResizerBar [resizerBarPosition]="'right'" cdkDrag cdkDragLockAxis="x"></div>
    </div>

    <div class="w-1/5 relative border-r flex flex-col" ngmResizer [resizerWidth]="200"
        id="ocap-entities"
        
    >
        <div class="h-28 w-full border border-dashed rounded-sm"
            cdkDropList
            [cdkDropListData]="entities"
            (cdkDropListDropped)="dropSlicers($event)">
            <div *ngFor="let item of slicers">
                {{ item | slicer }}
            </div>
        </div>

        <div class="flex-1 w-full border border-dashed rounded-sm"
            cdkDropList
            [cdkDropListData]="entities"
            (cdkDropListDropped)="dropRows($event)">
            <div *ngFor="let item of rows">
                {{ item.dimension }}
            </div>
        </div>

        <div ngmResizerBar [resizerBarPosition]="'right'" cdkDrag cdkDragLockAxis="x"></div>
    </div>

    <div class="w-3/5 flex flex-col">
        <div class="h-28 w-full border border-dashed rounded-sm"
            cdkDropList
            [cdkDropListData]="entities"
            (cdkDropListDropped)="dropColumns($event)">
            <div *ngFor="let item of columns">
                {{ item.dimension }}
            </div>
        </div>

        <ngm-analytical-card class="flex-1"
            cdkDropList
            [cdkDropListData]="entities"
            (cdkDropListDropped)="drop($event)"
            [dataSettings]="dataSettings"
            [slicers]="slicers"
        ></ngm-analytical-card>
    </div>
</div>